// values是啥

import { Form, Input, Button, Checkbox, message } from 'antd'
// import { http } from '../../utils/http'
// import { setToken } from '../../utils/token'
import { http, setToken } from '../../utils'

import './index.scss'
import logo from '../../assets/image/logo.png'

// 1.表单校验 组件?????

const Login = ({ history }) => {
  // 上方直接解构

  const onFinish = async values => {
    console.log('表单校验成功: ', values)
    const { mobile, code } = values

    try {
      const res = await http.post('/authorizations', {
        mobile,
        code,
      })
      console.log('登录结果:', res)

      // 1.登录成功后保存token进本地缓存
      // localStorage.setItem('geek_pc_token_87', res.data.data.token)
      setToken(res.data.data.token)

      message.success('登录成功啦', 1, () => {
        // 2.路由编程式导航 跳转
        history.push('/home')
      })
    } catch (error) {
      // 处理错误
      message.warning(error.response.data.message, 1)
    }
  }
  //   const onFinish = async values => {

  //   http.get()
  // }

  return (
    <div className='login'>
      <div className='login-wrapper'>
        <div>
          <img className='login-logo' src={logo} alt='' />
        </div>

        <Form
          name='normal_login'
          className='login-form'
          initialValues={{
            remember: true,
            mobile: '13345654345',
            code: '246810',
          }}
          onFinish={onFinish}
          size='large'
        >
          <Form.Item
            name='mobile'
            rules={[
              {
                required: true,
                message: '请输入手机号',
              },
              { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不对' },
            ]}
          >
            <Input placeholder='用户名' maxLength={11} />
          </Form.Item>
          <Form.Item
            name='code'
            rules={[
              {
                required: true,
                message: '请输入验证码',
              },
              { pattern: /^\d{6}$/, message: '请输入正确验证码' },
            ]}
          >
            <Input placeholder='验证码' maxLength={6} />
          </Form.Item>

          <Form.Item name='remember' valuePropName='checked'>
            <Checkbox> 我已阅读并同意「用户协议」和「隐私条款」</Checkbox>
          </Form.Item>

          <Form.Item>
            {/* htmltype属性的submit负责提交表单提交和校验 */}
            <Button block type='primary' htmlType='submit' className='login-form-button'>
              登 录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default Login
